实现页面的动态效果，交互效果流程

1、可以访问到要控制的元素
document.getElementById("id属性值"); DOM对象
document.getElementsByTagName("标签名");DOM对象集合,实现访问需要加索引
document.getElementsByClassName("class属性值");DOM对象集合

node.parentNode(DOM对象) node.children(DOM对象集合)
node.firstElementChild  node.lastElementChild
node.nextElementSibling node.previousElementSibling

2、考虑给合适的元素绑定事件
只能给DOM节点对象绑定事件
node.onclick = function(){}
node.onmouseover =function(){}
node.onfocus =function(){}
node.onblur =function(){}
node.onmouseout =function(){}

3、在事件的回调函数中，实际的完成操作过程
元素的标签中内容的操作 node.innerHTML node.innerText
元素标签上的属性操作
node.getAttribute("属性名")
node.setAttribute("属性名","属性值")
node.hasAttribute("属性名") 返回值是true / false
node.removeAttribute("属性名") 移除特定属性

网页元素的增加、修改、删除
document.createElement("标签名")
node.appendChild(child);
node.insertBefore(new,old);
node.replaceChild(new,old);
node.removeChild(child);